<script setup>
import { useStore } from "vuex";
// useStore可以直接取到vuex管理的状态和对应的修改状态的方法
let store = useStore();

const addValue = () => {
  // 触发修改状态的方法"increment"
  store.commit("increment");
};
const reset = () => {
  // 触发修改状态的方法"reset"
  store.commit("reset");
};
</script>

<template>
  <h1>使用VUEX进行状态管理</h1>
  <hr />
  <!-- 取出vuex管理的状态count -->
  <h2>Vuex中的当前数据是 {{ store.state.count }}</h2>
  <button @click="addValue">修改使状态加1</button>
  <button @click="reset">重置状态为0</button>
</template>

<style scoped>
button {
  height: 32px;
  width: 180px;
  margin-left: 20px;
  font-size: 18px;
  font-weight: 600;
}
</style>
